<style>
	article { width: 100%;  }
	article.gymSelect { height: 28px; }
	label.gymName { font-size: 20px; font-weight: bolder; color: #333; }
	input[name=gymName] { width: 500px; height: 32px; border-style: inset;  }
	button#btn_gymName { width: 60px; height: 32px; background-color: dodgerblue; border-radius: 5px; color: white; text-shadow: -1px -1px 1px #333; }
	.gymTitle span:nth-child(1) { font-size: 32px; font-weight: bolder; color: dodgerblue; text-shadow: 1px 1px 3px #333;  }
	.gymTitle span:nth-child(2) { font-size: 24px; font-weight: bolder; color: dodgerblue; margin-left: 20px; }

	.chart { width: 100%; height: 400px; border: 1px solid lightgrey; margin-top: 10px; }
	.chart_title { width: 100%; font-size: 28px; font-weight: bold; text-align: center; margin-top: 20px; }
</style>

<article class="gymSelect">
	<label class="gymName">地区或门店：</label>
	<input type="search" name="gymName" placeholder="请选择要查询的门店名称，可简短输入文字后从下拉列表中模糊匹配"  list="gymName">
	<datalist id="gymName"></datalist>
	<button id="btn_gymName">查询</button>
	
</article>

<article class="charts ">
	<div class="gymTitle"><span class="gymName"></span><span class=""></span></div>

	<div class="chart_title">门店每日上课情况</div>
	<div class="chart" id="gym_classes"></div>

	<div class="chart_title">门店每日签约和收入情况</div>
	<div class="chart" id="gym_orders"></div>

	<div class="chart_title">门店每日累计上课和收入增长趋势</div>
	<div class="chart" id="gym_users_grow"></div>

	<div class="chart_title">门店每日收入累计增长趋势</div>
	<div class="chart" id="gym_fee_grow"></div>
</article>

<script>


	var option_orders = $.extend(true, {}, option_bar_line, {
	    legend: {data: ['体验课签约人数', '正式课签约人数', '收入(体验课+正式课)']},
	    series: [{ name: '体验课签约人数',},{ name: '正式课签约人数',},{ name: '收入(体验课+正式课)', }]	
	});

	var option_classes = $.extend(true, {}, option_bar_line, {
	    legend: {data: ['上课人数', '开课数', '课均人数']},
	    series: [{name: '上课人数'}, {name: '开课数'},{name: '课均人数',}]   
	})

	var option_users_grow = $.extend(true, {}, option_lines, {
	    legend: {data: ['累计购买体验课人数', '累计购买正式课人数']},
	    series: [{name: '累计购买体验课人数', yAxisIndex:1},{name: '累计购买正式课人数'}]   
	})

	var option_fee_grow = $.extend(true, {}, option_lines, {
	    legend: {data: ['累计收入']},
	    series: [{name: '累计收入'}]   
	})

	$(function(){

	    $("datalist#gymName").append("<option value='全国'>");
	    $.get(dataDomain + "curd.php", {table: "gym", do: "select", fields: "distinct city", conditions: JSON.stringify({status: 1})}, function(r){
	        // console.log(r)
	        var s = r;
	        for(var i in s){
	            var x = s[i];
	            var op = $("<option>")
	            op.val(x.city);
	            $("datalist#gymName").append(op);
	        }
	        $("input[name=gymName]").val("全国");
	        $("button#btn_gymName").click();
	        $.get(dataDomain +　"curd.php", {table: "gym", do: "select", fields: "name", conditions: JSON.stringify({status: 1})}, function(r){
	            // console.log(r)
	            var s = r;
	            for(var i in s){
	                var x = s[i];
	                var op = $("<option>")
	                op.val(x.name);
	                $("datalist#gymName").append(op);
	            }
	        }, 'json')
	    }, 'json')  


	    // 点击查询按钮后，获取数据，显示所有图表
	    $("button#btn_gymName").click(function(){
	        var gymName = $("input[name=gymName]").val();
	        if(! gymName){
	            alert ("请选择门店！");
	            return ;
	        }
	        $("article.charts").show();

	        $.post(dataDomain + "aj/getData.php", {do: 'getGymDays', gymName: $("input[name=gymName]").val()}, function(r){
	            console.log(r);

	            var uz = 0;
	            var ut = 0;
	            var fee = 0;

	            for(var i in r){
	                var x = r[i];
	                option_orders.xAxis[0].data[i] = x.day;
	                option_orders.series[0].data[i] = x.users_ty;
	                option_orders.series[1].data[i] = x.users_zk;
	                option_orders.series[2].data[i] = x.fee_ty / 1 + x.fee_zk / 1;

	                option_classes.xAxis[0].data[i] = x.day;
	                option_classes.series[0].data[i] = x.users;
	                option_classes.series[1].data[i] = x.classes;
	                option_classes.series[2].data[i] = (x.users / x.classes).toFixed(2);

	                option_users_grow.xAxis[0].data[i] = x.day;
	                ut += x.users_ty / 1;
	                uz += x.users_zk / 1;
	                option_users_grow.series[0].data[i] = ut;
	                option_users_grow.series[1].data[i] = uz;

	                option_fee_grow.xAxis[0].data[i] = x.day;
	                fee += x.fee_ty / 1 + x.fee_zk / 1;
	                option_fee_grow.series[0].data[i] = fee;

	            }

	            option_orders.dataZoom[0].startValue = i - 32;
	            option_orders.dataZoom[0].endValue = i - 2;
	            var chart_orders = echarts.init(document.getElementById('gym_orders'));
	            chart_orders.setOption(option_orders);

	            option_classes.dataZoom[0].startValue = i - 32;
	            option_classes.dataZoom[0].endValue = i - 2;
	            var chart_classes = echarts.init(document.getElementById('gym_classes'));
	            chart_classes.setOption(option_classes);

	            option_users_grow.dataZoom[0].startValue = i - 32;
	            option_users_grow.dataZoom[0].endValue = i - 2;
	            var chart_users_grow = echarts.init(document.getElementById('gym_users_grow'));
	            chart_users_grow.setOption(option_users_grow);            

	            option_fee_grow.dataZoom[0].startValue = i - 32;
	            option_fee_grow.dataZoom[0].endValue = i - 2;
	            var chart_fee_grow = echarts.init(document.getElementById('gym_fee_grow'));
	            chart_fee_grow.setOption(option_fee_grow);

	            echarts.connect([chart_orders, chart_classes, chart_users_grow, chart_fee_grow]);


	        }, 'json')

	    })
		
	})
</script>